<!DOCTYPE html>
<html>
<head>
    <title>部门管理</title>
    <link rel="stylesheet" href="__STATIC__/js/element-plus-214/element_plus.css">
    <script src="__STATIC__/js/element-plus-214/vue@next.js"></script>
    <script src="__STATIC__/js/element-plus-214/element_plus.js"></script>
    <script src="__STATIC__/js/element-plus-214/zh-cn.js"></script>
    <script src="__STATIC__/js/js/jquery-3.3.1.min.js"></script>
    <script src="__STATIC__/js/layui-v2.5.5/layui.all.js"></script>
    <style>
        [v-cloak] {
            display: none !important;
        }
    </style>
</head>
<body>
<!-- layui-tab开始 -->
<div class="layui-tab" id="app" v-cloak>
    <el-container>
        <el-aside width="200px" style="padding: 20px 0 0 20px;">
            <el-card style="height: 80vh;overflow: auto;">
                <el-tree
                        :data="addressData"
                        accordion
                        :default-expanded-keys="[1]"
                        highlight-current="true"
                        @node-click="handleNodeClick">
                </el-tree>
            </el-card>
        </el-aside>
        <el-main>
            <el-card>
                <div>
                    <el-form :inline="true" :model="formInline" class="demo-form-inline">
                        <el-form-item label="部门名称">
                            <el-input v-model="formInline.name" placeholder="请输入部门名称" clearable></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSearch">查询</el-button>
                            <el-button type="primary" @click="handleAdd">添加部门</el-button>
                            <el-button type="success" @click="exportExcel">导出</el-button>
                        </el-form-item>
                    </el-form>

                </div>
                <div class="layui-card" style="margin-top:20px">
                    <el-table :data="tableData" style="width: 100%;" :header-cell-style="{background:'#f6f6f8'}" border v-loading="loading">
                        <el-table-column prop="name" label="部门名称"></el-table-column>
                        <el-table-column prop="address_name" label="所属地区"></el-table-column>
                        <el-table-column prop="contacts_name" label="负责人姓名"></el-table-column>
                        <el-table-column prop="contacts_phone" label="负责人联系方式"></el-table-column>
                        <el-table-column prop="contacts_job" label="职位"></el-table-column>
                        <el-table-column prop="department_num" label="部门人数"></el-table-column>
                        <el-table-column prop="parent_name" label="上级部门"></el-table-column>
                        <el-table-column prop="remark" label="备注"></el-table-column>
                        <el-table-column prop="edit_time" label="修改时间"></el-table-column>
                        <el-table-column prop="add_time" label="创建时间"></el-table-column>
                        <el-table-column prop="user_name" label="创建人"></el-table-column>
                        <el-table-column label="操作">
                            <template #default="scope">
                                <el-button @click="handleEdit(scope.row.id)">编辑</el-button>
                                <el-button type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <div style="margin: 10px 0;">
                        <el-pagination
                                background
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :page-sizes="[10, 20, 30, 40, 50]"
                                :page-size="pageSize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="pageTotal"
                        >
                        </el-pagination>
                    </div>
                </div>
            </el-card>
        </el-main>
    </el-container>

</div>
<script type="text/javascript">
    let layer = layui.layer
    const App = {
        data() {
            return {
                cri_code:'',
                loading: true,
                tableData: [],
                addressData: [],
                pageTotal:1,
                page:1,
                pageSize:10,
                formInline:{
                    name:''
                }
            };
        },
        created: function () {
            this.getAddressList()
            this.getDepartmentList()
        },
        methods: {
            getAddressList() {
                let that = this;
                $.ajax({
                    url: "{:cmf_plugin_url('Address://admin_index/getAddressList')}",
                    data: {},
                    dataType: "json",
                    type: "post",
                    success: function (res) {
                        if (res.code === 200) {
                            that.addressData = res.data
                        }
                    }
                });
            },
            //导出excel
            exportExcel(){
                let that = this;
                $.ajax({
                    url: "{:cmf_plugin_url('Department://admin_index/exportExcel')}",
                    data: {},
                    dataType: "json",
                    type: "post",
                    success: function (res) {
                        if (res.code === 200) {
                            window.location.href = res.data
                        }
                    }
                });
            },
            //选中地区树
            handleNodeClick(data) {
                this.cri_code = data.cri_code
            },
            //查询
            onSearch(){
                this.page=1;
                this.getDepartmentList();
            },
            //分页
            handleCurrentChange(val) {
                this.page=val;
                this.getDepartmentList();
            },
            handleSizeChange(val) {
                this.pageSize = val
                this.getDepartmentList()
            },
            //获取列表
            getDepartmentList() {
                let that = this;
                $.ajax({
                    url: "{:cmf_plugin_url('Department://admin_index/getList')}",
                    data: {
                        page:that.page,
                        pageSize:that.pageSize,
                        ...that.formInline
                    },
                    dataType: "json",
                    type: "post",
                    success: function (res) {
                        if (res.code === 200) {
                            that.tableData = res.data.data
                            that.pageTotal = res.data.total;
                        }
                        that.loading = false
                    }
                });
            },
            //添加
            handleAdd() {
                let that = this;
                let url = "{:cmf_plugin_url('Department://admin_index/add_page')}?cri_code="+that.cri_code;
                layer.open({
                    type: 2//基本层类型  0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                    , title: '新增部门'//层的标题
                    , shadeClose: false//是否点击遮罩关闭
                    , shade: 0.8//遮罩
                    , area: ['40%', '50%']//宽高
                    , fixed: false//固定
                    , content: url //iframe的url
                    , end: function () {
                        that.getDepartmentList()
                    }
                });
            },
            //编辑
            handleEdit(id) {
                let that = this;
                let url = "{:cmf_plugin_url('Department://admin_index/edit_page')}?id=" + id;
                layer.open({
                    type: 2//基本层类型  0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                    , title: '编辑部门'//层的标题
                    , shadeClose: false//是否点击遮罩关闭
                    , shade: 0.8//遮罩
                    , area: ['40%', '50%']//宽高
                    , fixed: false//固定
                    , content: url //iframe的url
                    , end: function () {
                        that.getDepartmentList()
                    }
                });
            },
            //删除
            handleDelete(id) {
                this.$confirm('是否确认删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(() => {
                    this.deletedPost(id)
                }).catch(() => {

                })
            },
            deletedPost(id) {
                let that = this;
                $.ajax({
                    url: "{:cmf_plugin_url('Department://admin_index/del')}",
                    data: {
                        id: id
                    },
                    dataType: "json",
                    type: "post",
                    success: function (res) {
                        if (res.code === 200) {
                            that.$message({
                                type: 'success',
                                message: res.message,
                            })
                            that.getDepartmentList()
                        } else {
                            that.$message({
                                type: 'error',
                                message: res.message,
                            })
                        }
                    }
                });
            },
        }
    };
    const app = Vue.createApp(App);
    app.use(ElementPlus, {
        locale: ElementPlusLocaleZhCn,
    });
    app.mount("#app");
</script>
</body>
</html>